<link rel="stylesheet" type="text/css" href="__STATIC__/api/css/style.css" />
<script src="__STATIC__/api/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/api/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label">模板名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input"  placeholder="请输入模板名称" value="" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模板内容</label>
            <div class="layui-input-block">
                <input type="hidden" name="fields" class="layui-input"  placeholder="请选择任意标签" value="" lay-verify="required" >
                <input type="hidden" name="star_names"class="layui-input"  placeholder="请输入五星打分名称" value=""  >
                <!--选择标签-->
                <div class="xzbq">
                    <p class="title"><span>-</span>选择任一标签<span>-</span></p>
                    <div class="tags">
                        <ul>
                            <li class="off" name="评价内容">评价内容</li>
                            <li name="发图/视屏">发图/视屏</li>
                            <li name="是否匿名">是否匿名</li>
                        </ul>
                    </div>
                </div>
                <!--自定义-->
                <div class="zdywx">
                    <p class="title"><span>-</span>自定义五星<span>-</span></p>
                    <div class="tags">
                        <div class="row">

<!--                            <div class="form-group">-->
<!--                                <div class="col-md-4 col-sm-4 col-xs-4">-->
<!--                                    <input type="text" name="star_name"  class="layui-input number"  placeholder="请输入五星分值名称" id="">-->
<!--                                </div>-->
<!--                            </div>-->

                        </div>
                        <div id="opts"></div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12  col-xs-12">
                                <div class="form-group">

                                    <button id="fat-btn" class="layui-btn layui-btn-normal layui-btn-sm"
                                            type="button">添加
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea"  placeholder="请输入备注" autocomplete="off"></textarea>
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">二维码</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="qr_code" class="layui-input"  placeholder="请输入二维码" value="">-->
<!--            </div>-->
<!--        </div>-->
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit onclick="getSatrtInfo()">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<script src="/static/plugs/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    $('.tags ul li').click(function () {
        var arr = [];
        var val = $("[name='fields']").val()
        if(val){
            arr = val.split(',');
        }

        // for(var i in arr){
        //     alert(arr[i])
        // }

        // alert(432432);return false;
        $(this).toggleClass('on')
        if ( $(this).hasClass("on") ) {
            arr.push( $(this).attr('name'));
        }else{
            arr.splice(jQuery.inArray($(this).attr('name'),arr),1);
        }
        JSON.stringify(arr);
        console.log(arr)

        $("[name='fields']").val(arr)

    });
    function getSatrtInfo(){
        var arr = [];
        $("input[name='star_name']").each(function(){
            if($(this).val()){
                arr.push($(this).val());
            }

        })
        console.log(arr);
        // console.log(star_name);return false;

        $("[name='star_names']").val(arr);
    }
    function del(obj){
        $(obj).parents(".row").remove();
    }
    $(function() {


        $("#fat-btn").click(function() {
            if($(".number:last").val() == "") {
                layer.msg('请输入五星打分名称', {
                    icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //do something
                });
            } else {
                var htm = "";
                htm += "    <div class='row'>";
                htm += "    <div class='form-group'>";
                htm += "    <div class='col-md-4 col-sm-4  col-xs-4'>";
                htm += "    <input type='text' style='display:inline-block;width:80%' name='star_name' class='layui-input number' placeholder='请输入五星评分名称' id='' autocomplete='off'>";
                htm += "    <a href='#'  class='mar_l10' onclick='del(this)' style='float:none'><i class='fa fa-minus' style='color:#8B0000'></i>  </a>";
                htm += "    </div></div>";
                htm += "    </div>";
                $('#opts').append(htm);

            }
        });

    });
</script>
